Pasiuna
Pagsugod sa Bootstrap, ang pinakasikat nga framework sa kalibutan para sa paghimo og responsive, mobile-first nga mga site, nga adunay jsDelivr ug template starter page.
Dali nga pagsugod
Nangita aron dali nga idugang ang Bootstrap sa imong proyekto? Gamita ang jsDelivr, usa ka libre nga open source CDN. Gigamit ang usa ka manager sa package o kinahanglan nga i-download ang gigikanan nga mga file? Lakaw ngadto sa pahina sa pag-download .
CSS
Kopyaha-paste ang stylesheet <link>
sa imong <head>
una sa tanan nga uban pang mga stylesheet aron makarga ang among CSS.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS
Daghan sa among mga sangkap nanginahanglan sa paggamit sa JavaScript aron molihok. Sa piho, nanginahanglan sila sa among kaugalingon nga mga plugin sa JavaScript ug Popper . Ibutang ang usa sa mosunod nga <script>
s duol sa katapusan sa imong mga panid, sa wala pa ang panapos nga </body>
tag, aron mahimo kini.
Bundle
Ilakip ang matag Bootstrap JavaScript plugin ug dependency sa usa sa among duha ka bundle. Ang duha bootstrap.bundle.js
ug bootstrap.bundle.min.js
naglakip sa Popper alang sa among mga tooltip ug popovers. Alang sa dugang nga kasayuran bahin sa kung unsa ang gilakip sa Bootstrap, palihug tan-awa ang among seksyon sa sulud .
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Magbulag
Kung magdesisyon ka nga mag-uban sa bulag nga solusyon sa script, kinahanglan nga mag-una ang Popper (kung naggamit ka mga tooltip o popovers), ug dayon ang among mga plugin sa JavaScript.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Mga modulo
Kung mogamit ka <script type="module">
, palihug tan-awa ang among paggamit sa Bootstrap ingon usa ka seksyon sa module .
Mga sangkap
Natingala kung unsang mga sangkap ang klaro nga nanginahanglan sa among JavaScript ug Popper? I-klik ang link sa pagpakita sa mga sangkap sa ubos. Kung dili ka sigurado bahin sa kinatibuk-ang istruktura sa panid, ipadayon ang pagbasa alang sa usa ka panig-ingnan nga template sa panid.
Ipakita ang mga sangkap nga nanginahanglan og JavaScript
- Mga alerto sa pag-dismiss
- Mga buton para sa pag-toggling sa mga estado ug checkbox/radio functionality
- Carousel para sa tanang gawi sa slide, kontrol, ug indikasyon
- Pag-collapse para sa pag-toggle sa visibility sa sulod
- Mga dropdown para sa pagpakita ug pagposisyon (gikinahanglan usab ang Popper )
- Mga modala alang sa pagpakita, pagposisyon, ug pamatasan sa pag-scroll
- Navbar alang sa pagpalapad sa among Collapse plugin aron mapatuman ang responsive nga pamatasan
- Mga offcanvases para sa pagpakita, pagposisyon, ug pag-scroll nga kinaiya
- Mga toast para sa pagpakita ug pagtangtang
- Mga tooltip ug popover para sa pagpakita ug pagpoposisyon (kinahanglan usab ang Popper )
- Scrollspy alang sa scroll behavior ug navigation updates
Panimulang template
Siguruha nga i-set up ang imong mga panid sa labing bag-ong mga sumbanan sa disenyo ug pag-uswag. Kana nagpasabut sa paggamit sa usa ka HTML5 doctype ug naglakip sa usa ka viewport meta tag alang sa husto nga responsive nga mga kinaiya. Ibutang kini tanan ug ang imong mga panid kinahanglan nga ingon niini:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Alang sa sunod nga mga lakang, bisitaha ang Layout docs o ang among opisyal nga mga pananglitan aron masugdan ang pagbutang sa sulud ug mga sangkap sa imong site.
Importante nga mga global
Ang Bootstrap naggamit og pipila ka importante nga global nga mga estilo ug mga setting nga kinahanglan nimong masayran kung gamiton kini, nga ang tanan halos gitumong sa pag- normalize sa cross browser styles. Magsalom ta.
HTML5 nga doctype
Ang Bootstrap nagkinahanglan sa paggamit sa HTML5 doctype. Kung wala kini, makakita ka og pipila ka funky nga dili kompleto nga estilo, apan ang paglakip niini dili kinahanglan nga hinungdan sa bisan unsang daghang mga hiccups.
<!doctype html>
<html lang="en">
...
</html>
Responsive nga meta tag
Ang Bootstrap gihimong mobile una , usa ka estratehiya diin atong gi-optimize una ang code para sa mga mobile device ug dayon i-scale ang mga component kung gikinahanglan gamit ang CSS media query. Aron masiguro ang husto nga paghubad ug pag-zoom sa paghikap alang sa tanan nga mga aparato, idugang ang responsive viewport meta tag sa imong <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Makita nimo ang usa ka pananglitan niini sa aksyon sa template sa pagsugod .
Ang gidak-on sa kahon
Para sa mas prangka nga pagsukod sa CSS, gibalhin namo ang global box-sizing
value gikan content-box
sa border-box
. Gipaneguro niini padding
nga dili makaapekto sa katapusang nakalkula nga gilapdon sa usa ka elemento, apan mahimo kini nga hinungdan sa mga problema sa pipila nga software sa ikatulo nga partido sama sa Google Maps ug Google Custom Search Engine.
Sa talagsaon nga okasyon kinahanglan nimo nga i-override kini, gamita ang usa ka butang sama sa mosunod:
.selector-for-some-widget {
box-sizing: content-box;
}
Uban sa snippet sa ibabaw, ang mga nested nga elemento—lakip ang namugna nga content pinaagi sa ::before
ug— ::after
ang tanan makapanunod sa gipiho box-sizing
alang niana .selector-for-some-widget
.
Pagkat-on og dugang mahitungod sa modelo sa kahon ug pagsukod sa CSS Tricks .
Pag-reboot
Para sa gipaayo nga cross-browser rendering, among gigamit ang Reboot para matul-id ang mga inconsistency sa mga browser ug device samtang naghatag ug gamay nga mas opinyon nga mga pag-reset sa komon nga HTML nga mga elemento.
Komunidad
Magpabilin nga updated sa pag-uswag sa Bootstrap ug pag-abot sa komunidad uban niining makatabang nga mga kapanguhaan.
- Pagbasa ug pag-subscribe sa The Official Bootstrap Blog .
- Pakig-chat sa mga kaubang Bootstrappers sa IRC. Sa
irc.libera.chat
server, sa#bootstrap
channel. - Ang tabang sa pagpatuman mahimong makit-an sa Stack Overflow (tag
bootstrap-5
). - Kinahanglang gamiton sa mga developers ang keyword
bootstrap
sa mga pakete nga nagbag-o o nagdugang sa pagpaandar sa Bootstrap kung nag-apod-apod pinaagi sa npm o parehas nga mga mekanismo sa paghatud alang sa labing kataas nga pagkadiskobre.
Mahimo usab nimong sundan ang @getbootstrap sa Twitter alang sa labing bag-o nga tsismis ug katingad-an nga mga music video.